<template>
  <div class="latency-modal-content">
    <a-spin :spinning="loadingLatencyData" tip="加载延迟数据中...">
      <div class="latency-stats">
        <div class="stats-section">
          <h4 class="stats-title">
            <span class="direction-indicator forward">→</span>
            {{ selectedEdge?.source }} → {{ selectedEdge?.target }}
          </h4>
          <a-row :gutter="16">
            <a-col :span="8">
              <a-statistic
                title="最大延迟"
                :value="forwardLatencyStats.max"
                suffix="ms"
                :precision="2"
                :value-style="{ color: '#ff4d4f', fontSize: '16px' }"
              />
            </a-col>
            <a-col :span="8">
              <a-statistic
                title="最小延迟"
                :value="forwardLatencyStats.min"
                suffix="ms"
                :precision="2"
                :value-style="{ color: '#52c41a', fontSize: '16px' }"
              />
            </a-col>
            <a-col :span="8">
              <a-statistic
                title="平均延迟"
                :value="forwardLatencyStats.avg"
                suffix="ms"
                :precision="2"
                :value-style="{ color: '#1890ff', fontSize: '16px' }"
              />
            </a-col>
          </a-row>
        </div>
        <div class="stats-section">
          <h4 class="stats-title">
            <span class="direction-indicator backward">←</span>
            {{ selectedEdge?.target }} → {{ selectedEdge?.source }}
          </h4>
          <a-row :gutter="16">
            <a-col :span="8">
              <a-statistic
                title="最大延迟"
                :value="backwardLatencyStats.max"
                suffix="ms"
                :precision="2"
                :value-style="{ color: '#ff4d4f', fontSize: '16px' }"
              />
            </a-col>
            <a-col :span="8">
              <a-statistic
                title="最小延迟"
                :value="backwardLatencyStats.min"
                suffix="ms"
                :precision="2"
                :value-style="{ color: '#52c41a', fontSize: '16px' }"
              />
            </a-col>
            <a-col :span="8">
              <a-statistic
                title="平均延迟"
                :value="backwardLatencyStats.avg"
                suffix="ms"
                :precision="2"
                :value-style="{ color: '#1890ff', fontSize: '16px' }"
              />
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="latency-chart-section">
        <div class="chart-header">
          <span>延迟趋势图</span>
          <a-select
            :value="selectedTimeRange"
            :options="timeRangeOptions"
            style="width: 140px; margin-left: 16px;"
            @change="onTimeRangeChange"
          />
        </div>
        <v-chart :option="latencyChartOptions" autoresize style="height: 320px;" />
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import VChart from 'vue-echarts'
import { PropType } from 'vue'

const props = defineProps({
  selectedEdge: Object,
  forwardLatencyStats: Object,
  backwardLatencyStats: Object,
  selectedTimeRange: Number,
  timeRangeOptions: Array,
  latencyChartOptions: Object,
  loadingLatencyData: Boolean,
  handleTimeRangeChange: Function
})
function onTimeRangeChange(value: number) {
  props.handleTimeRangeChange && props.handleTimeRangeChange(value)
}
</script>

<style scoped>
.latency-modal-content {
  padding: 12px 0;
}
.stats-section {
  margin-bottom: 16px;
}
.stats-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
}
.direction-indicator {
  font-size: 18px;
  margin-right: 6px;
}
.forward {
  color: #1890ff;
}
.backward {
  color: #52c41a;
}
.chart-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
}
</style>
